<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>打印预览</title>
    <!-- hiprint -->
    <link href="{{root}}static/plugins/hiprint/css/hiprint.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/print-lock.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/print-lock.css" media="print" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{root}}static/plugins/hiprint/css/hiprint-style.css" rel="stylesheet">
    <script src='{{root}}static/javascript/jquery-1.11.2.min.js'></script>
    <style>
        .hide {display: none;}
        .warn {padding: 8px;background-color: #f2f2f2;margin: 2px 0 0 0;}
        .dibian {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;background-color: #000;-moz-opacity: 0.3;opacity: .30;filter: alpha(opacity=30);}
        .win {width: 400px;height: 200px;position: fixed;top: 50%;left: 50%;margin: -100px 0 0 -200px;z-index: 2;background-color: #fff;border-top-left-radius: 4px;border-top-right-radius: 4px;}
        .winTitle {height: 40px;line-height: 40px;background-color: #d7d7d7;padding: 0 10px 0 10px;border-top-left-radius: 4px;border-top-right-radius: 4px;user-select: none;cursor: pointer;}
        .winClose {cursor: pointer;float: right;font-size: 24px;}
        .winClose:hover {color: #629afd;}
        .winAuto {overflow: auto;}
        #warnWord {font-size: 14px;line-height: 20px;text-align: center;display: table-cell;vertical-align: middle;width: 300px;height: 60px;padding: 10px;}
        #warnSure, #warnCancel {position: absolute;width: 150px;height: 40px;line-height: 40px;text-align: center;bottom: 0;cursor: pointer;color: #fff;}
        #warnSure {background-color: #ff7472;}
        #warnSure:hover {background-color: #e66765;}
        #warnCancel {background-color: #ccc;left: 150px;}
        #warnCancel:hover {background-color: #aaa;}
        .winFooter {background-color: #cecdbb;height: 40px;line-height: 40px;padding: 0 10px 0 10px;text-align: right;}
        .layerSearch {padding: 16px 10px 0 10px;}
    </style>
</head>
<body>
<div id="templateDesignDiv"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="display: inline-block; width: auto;">
        <div class="modal-content" id="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeWind()"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel" onclick="preview()">打印预览</h4>
                <hr style="margin-top: 0">
                <button type="button" class="btn btn-danger" onclick="printByHtml()">打印</button>
                <button type="button" class="btn btn-danger" onclick="exportHtml()">导出</button>
            </div>
            <div class="modal-body">
                <div class="prevViewDiv"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeWind()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="{{root}}static/plugins/hiprint/js/bootstrap.min.js"></script>
<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
<script src="{{root}}static/plugins/hiprint/js/polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="{{root}}static/plugins/hiprint/js/hiprint.bundle.js"></script>
<!-- 条形码生成组件-->
<script src="{{root}}static/plugins/hiprint/js/JsBarcode.all.min.js"></script>
<!-- 二维码生成组件-->
<script src="{{root}}static/plugins/hiprint/js/qrcode.js"></script>
<!-- 调用浏览器打印窗口helper类，可自行替换-->
<script src="{{root}}static/plugins/hiprint/js/jquery.hiwprint.js"></script>
<!-- JS PDF-->
<script src="{{root}}static/plugins/hiprint/js/canvas2image.js"></script>
<script src="{{root}}static/plugins/hiprint/js/canvg.min.js"></script>
<script src="{{root}}static/plugins/hiprint/js/html2canvas.min.js"></script>
<script src="{{root}}static/plugins/hiprint/js/jspdf.min.js"></script>
<script>
    // json 转移
    const safeParseJSON = (jsonString) => {
        try {
            // 尝试解析JSON字符串
            return JSON.parse(jsonString);
        } catch (e) {
            try {
                return JSON.parse(jsonString.replace(/\\+/g, '\\\\'));
            } catch (e2) {
                console.error("JSON parsing error", e2.message);
            }
        }
        return null; // 或者返回其他默认值
    }
    // 打印
    const printByHtml = () => {
        hiprintTemplate.printByHtml(html)
    }
    // 导出为PDF
    const exportHtml = () => {
        hiprintTemplate.toPdf(printData, "导出数据");
    }
    // 关闭页卡
    const closeWind = () =>{
        window.open("about:blank","_self").close()
    }
    const  align = () => {
        const pageWidth = $(document).width()
        const contentWidth = $('#modal-content').width()
        $('#myModal').css('left', (pageWidth-contentWidth)/2)
    }

    const printJson = safeParseJSON(`{{printJson}}`),
          printData = safeParseJSON(`{{printData}}`)
    hiprint.init();
    let hiprintTemplate = new hiprint.PrintTemplate({template: printJson});
    const html = hiprintTemplate.getHtml(printData)
    $('#myModal .modal-body .prevViewDiv').html(html)
    $('#myModal').modal('show')
    // 居中显示
    align()
</script>
</body>
</html>
